<template>
	<view>
		<view>
			<view v-for="(item, index) in emplist" class="vi1">
				<view class="vi2">
					<view class="flex-row wrapper">
						<u-image class="im" :src="item.picture" width="112rpx" height="112rpx" shape="circle"></u-image>

						<view class="flex-col flex-row wraper-col vi3">
							<view class="u-line-1 text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view>
					<!-- 添加点击事件 @click="affirm(item.eid)" -->
					<u-button @click="tishi(item.eid)" class="button1" type="success" shape="circle">
						添加
					</u-button>
				</view>





			</view>

		</view>


		<view>
			<!-- 消息提示  -->

			<view>
				<!-- 确认修改、取消修改 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="通知" content="是否确认添加到本次会议？"
						@confirm="dialogConfirm" @close="dialogClose">
						<!-- -->
					</uni-popup-dialog>
				</uni-popup>


				<!-- 修改成功后的提示 -->
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
			</view>

		</view>


	</view>
</template>

<script>
	export default {

		onLoad: function(option) {
			// console.log("接收到的参数" + option.mid);
			this.conference.mid = option.mid
		},


		data() {
			return {
				conference: {},
				emplist: null,
				//提示信息
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				empID: 0,
			}
		},
		created() {
			// console.log("参数:" + this.conference.mid);
			this.getpemp()
		},
		methods: {
			tishi(emp) {
				this.empID = emp
				this.dialogToggle('success')
			},

			affirm() { //确认参加

				var m = {
					meetingid: this.conference.mid,
					meetingenter: 3,
					userid: this.empID,
					status: 1
				}
				console.log(m)
				uni.request({
					url: "http://localhost:8007/conference/mine/addMine",
					method: 'post',
					data: m,
					success: (res) => {
						this.getpemp()
					}
				})
			},
			//初始化未参与人
			getpemp() {
				uni.request({
					url: "http://localhost:8007/conference/mine/getemp/" + this.conference.mid,
					method: 'get',
					success: (res) => {
						// console.log("mmmm")
						console.log(res.data.data.employee)
						// console.log("mmmm")
						this.emplist = res.data.data.employee
					}
				})
			},


			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},


			dialogConfirm() {
				//调用添加请接口
				this.affirm()
				console.log('点击确认')
				this.messageText = `您已成功添加！`
				this.msgType = 'success'
				this.$refs.message.open()

			},

			dialogClose() {
				console.log('点击取消')
				this.messageText = `您已取消添加！`
				this.msgType = 'info'
				this.$refs.message.open()
			},



		}
	}
</script>

<style lang="scss" scoped>
	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.text {
		margin-top: 15px;
		width: 73px;
		margin-bottom: 14px;
		font-size: 20px;
	}

	.text-two {
		width: 100%;
		font-size: 12px;
	}

	.vi1 {
		width: 91%;
		height: 80px;
		background-color: white;
		margin: 10px 0px 0px 15px;
	}

	.vi2 {
		float: left;
		margin: 15px 0px 0px 20px;
	}

	.vi3 {
		margin: 0px 0px 0px 20px;
	}


	.button1 {
		width: 80px;
		float: left;
		margin-left: 40px;
		margin-top: 18px;
		background: #2979ff;
		border-radius: 10px;
		border-color: #2979ff;
	}
</style>
